<template>
  <div class="water-ball-box">
    <div class="header">
      <div class="title">水球图</div>
      <div class="tool" @click="goToWaterBallPage">
        {{ $store.state.fullScreenStatus["waterBall"] ? "返回主页" : "全屏" }}
      </div>
    </div>
    <div class="water-ball" ref="water-ball">我是水球图</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-13 22:38:33
 *@Description: 模块描述
 */
import { mapMutations } from "vuex"
export default {
  name: "",
  props: {
    fullScreenStatus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      myCharts: null,
      data: 0,
      timer: null,
    }
  },
  created() {},
  mounted() {
    this.initEcharts()
    window.addEventListener("resize", this.screenUpdate)
    // 模拟socket数据
    this.timer = setInterval(() => {
      if (this.data < 100) {
        this.data += 1
        this.updateData()
      } else {
        this.data = 0
      }
    }, 2000)
  },
  beforeDestroy() {
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", this.screenUpdate())
    clearInterval(this.timer)
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    // 初始化图表
    initEcharts() {
      const waterBall = document.querySelector(".water-ball")
      this.myCharts = this.$echarts.init(waterBall)
      const option = {
        series: [
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "50%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: [
              this.data,
              {
                value: this.data,
                direction: "left", //波浪方向
              },
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: this.$fitChartFont(1),
              color: "rgba(62, 208, 255, 1)", // 球体本景色
            },
            amplitude: "6%", //波浪的振幅
            // 修改波浪颜色
            // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#6CDEFC",
                  },
                  {
                    offset: 0,
                    color: "#429BF7",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                // formatter: 0.87 * 100 + '\n%',
                formatter: this.data + "{d|%}",
                //  formatter: function(params){
                //     return params.value* 100 + " \n%";
                // },
                rich: {
                  d: {
                    fontSize: this.$fitChartFont(26),
                  },
                },
                textStyle: {
                  fontSize: this.$fitChartFont(26),
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["52%", "53.5%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: this.$fitChartFont(500),
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#00AFFF",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#00AFFF",
                  },
                },
              },
            ],
          },
          {
            //外发光
            type: "pie",
            z: 1,
            zlevel: -1,
            radius: ["60%", "80.5%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: this.$fitChartFont(10),
                color: "rgba(195,242,255,0.1)",
              },
            },
            label: {
              show: false,
            },
            data: [this.$fitChartFont(100)],
          },
          {
            //底层外发光
            type: "pie",
            z: 1,
            zlevel: -2,
            radius: ["60%", "90%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: this.$fitChartFont(20),
                color: "rgba(200,242,250,.1)",
              },
            },
            label: {
              show: false,
            },
            data: [this.$fitChartFont(100)],
          },
          {
            type: "pie",
            zlevel: 0,
            silent: true,
            radius: ["68%", "70%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.pie(),
          },
        ],
      }
      if (this.myCharts) {
        this.myCharts.setOption(option)
      }
    },
    // 图表socket数据更新
    updateData() {
      const option = {
        series: [
          {
            data: [this.data / 100, this.data / 100, this.data / 100], // data个数代表波浪数
            label: {
              normal: {
                formatter: this.data + "{d|%}",
              },
            },
            outline: {
              show: false,
            },
          },
        ],
      }
      if (this.myCharts) {
        this.myCharts.setOption(option)
        this.myCharts.resize()
      }
    },
    // 视口大小改变时，图表渲染
    screenUpdate() {
      const option = {
        series: [
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "50%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: [
              this.data,
              {
                value: this.data,
                direction: "left", //波浪方向
              },
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: this.$fitChartFont(1),
              color: "rgba(62, 208, 255, 1)", // 球体本景色
            },
            amplitude: "6%", //波浪的振幅
            // 修改波浪颜色
            // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#6CDEFC",
                  },
                  {
                    offset: 0,
                    color: "#429BF7",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                // formatter: 0.87 * 100 + '\n%',
                formatter: this.data + "{d|%}",
                //  formatter: function(params){
                //     return params.value* 100 + " \n%";
                // },
                rich: {
                  d: {
                    fontSize: this.$fitChartFont(26),
                  },
                },
                textStyle: {
                  fontSize: this.$fitChartFont(26),
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["52%", "53.5%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: this.$fitChartFont(500),
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#00AFFF",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#00AFFF",
                  },
                },
              },
            ],
          },
          {
            //外发光
            type: "pie",
            z: 1,
            zlevel: -1,
            radius: ["60%", "80.5%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: this.$fitChartFont(10),
                color: "rgba(224,242,255,0.3)",
              },
            },
            label: {
              show: false,
            },
            data: [this.$fitChartFont(100)],
          },
          {
            //底层外发光
            type: "pie",
            z: 1,
            zlevel: -2,
            radius: ["60%", "90%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: this.$fitChartFont(20),
                color: "rgba(224,242,255,.2)",
              },
            },
            label: {
              show: false,
            },
            data: [this.$fitChartFont(100)],
          },
          {
            type: "pie",
            zlevel: 0,
            silent: true,
            radius: ["68%", "70%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.pie(),
          },
        ],
      }
      if (this.myCharts) {
        this.myCharts.setOption(option)
        this.myCharts.resize()
      }
    },
    goToWaterBallPage() {
      if (!this.$store.state.fullScreenStatus.waterBall) {
        this.$router.push("/waterBallPage")
        this.changeFullScreenStatus({ type: "waterBall", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "waterBall", value: false })
      }
    },
    pie() {
      // 外层虚线圈数据
      let dataArr = []
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 50,
            itemStyle: {
              color: "#19A4BB",
              borderWidth: 0,
              borderColor: "rgba(0,0,0,0)",
            },
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
              borderColor: "rgba(0,0,0,0)",
            },
          })
        }
      }
      return dataArr
    },
  },
}
</script>

<style lang="scss" scoped>
.water-ball,
.water-ball-box {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    padding: vw(5);
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .title {
      color: white;
      font-size: vw(20);
    }
    .tool {
      cursor: pointer;
      color: white;
      font-size: vw(20);
    }
  }
}
</style>

